<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./static/iconfont/iconfont.css">
    <link rel="stylesheet" href="../dist/css/COSME.css">
    <link rel="stylesheet" href="./static/libs/javascripts/swiper-bundle.min.css">
</head>

<body>
    <!-- 导航栏 -->
    <div id="Ceiling">
        <!-- 楼梯 -->
        <ul class="btn-list">
            <li>首页导航</li>
            <li>商品列表</li>
            <li>商品套装</li>
            <li>积分兑换</li>
            <li>回到顶部</li>
        </ul>
        <div id="head">
            <div class="icon content">
                <ul>
                    <li style="width:200px">
                        <img src="https://shop.decorte-cosmetics.cn/themes/kaben/static/images/home/home_logo.png"
                            alt="">
                    </li>
                    <li>明星产品</li>
                    <li>臻选礼盒</li>
                    <li class="skin">
                        <a href="">
                            护肤
                        </a>
                        <div class="pull-down">
                            <ul>
                                <li>卸妆</li>
                                <li>洁面</li>
                                <li>乳液</li>
                                <li>化妆水</li>
                                <li>美容液</li>
                                <li>面霜</li>
                                <li>面膜</li>
                                <li>按摩</li>
                                <li>防护</li>
                            </ul>
                        </div>
                    </li>
                    <li class="cosmetics">
                        <a href="">彩妆</a>
                        <div class="pull-down1">
                            <ul>
                                <li>腮红</li>
                                <li>眼影</li>
                                <li>眉笔</li>
                                <li>眼线</li>
                                <li>睫毛膏</li>
                                <li>唇膏</li>
                                <li>粉饼</li>
                                <li>粉底液</li>
                                <li>粉底霜</li>
                                <li>基底乳</li>
                                <li>蜜粉</li>
                                <li>修颜膏</li>
                            </ul>
                        </div>
                    </li>
                    <li class="beauty">
                        <a href="">美妆工具</a>
                        <div class="pull-down2">
                            <ul>
                                <li>护肤工具</li>
                                <li>底妆工具</li>
                                <li>彩妆工具</li>
                            </ul>
                        </div>
                    </li>
                    <li class="proDuct">
                        <a href="">产品系列</a>
                        <div class="pull-down3">
                            <ul>
                                <li>
                                    <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2019/5/29/10//30581503.png"
                                        alt="">

                                </li>
                                <li>
                                    <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2019/6/13/15//29500574.png"
                                        alt="">
                                </li>
                                <li>
                                    <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2019/10/28/21//52524279.png"
                                        alt="">
                                </li>
                                <li>
                                    <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2021/4/26/15//47019916.jpg"
                                        alt="">
                                </li>
                                <li>
                                    <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2019/9/21/21//08018144.png"
                                        alt="">
                                </li>
                                <li>
                                    <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2019/11/26/15//52356873.png"
                                        alt="">
                                </li>
                                <li>
                                    <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2018/9/5/10//51571121.png"
                                        alt="">
                                </li>
                                <li>
                                    <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2018/11/19/15//35548275.jpg"
                                        alt="">
                                </li>
                                <li>
                                    <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2018/8/2/14//00449919.png"
                                        alt="">
                                </li>
                                <li>
                                    <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2018/8/2/14//01294805.png"
                                        alt="">
                                </li>
                                <li>
                                    <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2018/8/2/14//02081247.png"
                                        alt="">
                                </li>
                                <li>
                                    <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2018/8/2/14//02249696.png"
                                        alt="">
                                </li>
                                <li>
                                    <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2018/8/2/14//03258042.png"
                                        alt="">
                                </li>
                                <li>
                                    <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2018/8/2/14//03400911.png"
                                        alt="">
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="list">
                <ul>
                    <li>
                        <a href="http://127.0.0.1:8080/src/register.html"><i class="list1 across iconfont icon-wode">
                                <p class="typeface">登录</p>

                            </i></a>
                    </li>
                    <li>
                        <i class="list2 across iconfont icon-gouwuche">
                            <p class="typeface">购物车</p>
                        </i>
                    </li>
                    <li class="lis">
                        <i class="list3 across iconfont icon-fangdajing">
                            <p class="typeface">搜索</p>
                        </i>
                        <div class="aaa">
                            <input type="text" name="" placeholder="搜索" class="bbb" outline="none">
                            <div class="ccc">
                                <span class="ddd iconfont icon-fangdajing"></span>
                                <span class="eee iconfont icon-guanbi-01"></span>
                            </div>
                        </div>

                    </li>
                    <li>
                        <i class="list4 across iconfont  icon-kefu">
                            <p class="typeface">客服</p>

                        </i>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 轮播图 -->
    <div class="swiper-container container1">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img
                    src="https://shop.decorte-cosmetics.cn/statics/attachment/adv/2021/7/12/15//12209790.jpg" alt="">
            </div>
            <div class="swiper-slide"><img
                    src="https://shop.decorte-cosmetics.cn/statics/attachment/adv/2021/4/26/14//15437739.jpg" alt="">
            </div>
            <div class="swiper-slide"><img
                    src="https://shop.decorte-cosmetics.cn/statics/attachment/adv/2021/7/12/17//59415099.jpg" alt="">
            </div>
            <div class="swiper-slide"><img
                    src="https://shop.decorte-cosmetics.cn/statics/attachment/adv/2021/6/1/12//14511693.jpg" alt="">
            </div>
            <div class="swiper-slide"><img
                    src="https://shop.decorte-cosmetics.cn/statics/attachment/adv/2021/4/26/17//11511779.jpg" alt="">
            </div>
        </div>
        <!-- 左右按钮 -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <!-- jQuery分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    <!-- 4个产品 -->
    <div class="product">
        <ul>
            <li><img src="https://shop.decorte-cosmetics.cn/statics/attachment/adv/2021/7/12/17//58107754.jpg" alt="">
            </li>
            <li><img src="https://shop.decorte-cosmetics.cn/statics/attachment/adv/2021/7/22/10//55279363.jpg" alt="">
            </li>
            <li><img src="https://shop.decorte-cosmetics.cn/statics/attachment/adv/2020/3/25/12//02091648.jpg" alt="">
            </li>
            <li><img src="https://shop.decorte-cosmetics.cn/statics/attachment/adv/2020/3/25/12//02514538.jpg" alt="">
            </li>
        </ul>
    </div>
    <!-- 大字体 -->
    <div class="introduce content">
        <h1>臻品严选成就完美</h1>
    </div>
    <!-- 横线 -->
    <div class="wire"></div>
    <!-- 商品列表 -->
    <div class="lists">
        <ul>
            <a href="particulars.html#id=1">
                <li>
                    <div class="left">
                        <div class="yi">黛珂保湿美容液（光耀未来版）</div>
                        <div class="er">黛珂保湿美容液（光耀未来版）</div>
                        <div class="san">¥ 1,050 </div>
                        <div class="si">立即购买</div>
                    </div>
                    <div class="right">
                        <img class="lazy"
                            data-original="https://shop.decorte-cosmetics.cn/statics/attachment/recommend/2021/6/21/17//44418245.jpg"
                            alt="">
                    </div>
                </li>
            </a>
            <a href="particulars.html#id=2">
                <li>
                    <div class="left1"><img class="lazy"
                            data-original="https://shop.decorte-cosmetics.cn/statics/attachment/recommend/2021/7/12/17//56130512.jpg"
                            alt=""></div>
                    <div class="right1">
                        <div class="yi">黛珂牛油果紫苏水套组</div>
                        <div class="er">牛油果紫苏水套组</div>
                        <div class="san">¥ 600</div>
                        <div class="si">立即购买</div>
                    </div>
                </li>
            </a>
            <a href="particulars.html#id=3">
                <li>
                    <div class="left">
                        <div class="yi" style="margin-left: 300px;">黛珂AQ舒活美白护套组</div>
                        <div class="er" style="margin-left: 420px;">黛珂AQ舒活美白套组</div>
                        <div class="san" style="margin-left: 500px;">¥ 1,380 </div>
                        <div class="si">立即购买</div>
                    </div>
                    <div class="right"><img class="lazy"
                            data-original="https://shop.decorte-cosmetics.cn/statics/attachment/recommend/2021/7/12/17//56461735.jpg"
                            alt=""></div>
                </li>
            </a>
            <a href="particulars.html#id=4">

                <li>
                    <div class="left1"><img class="lazy"
                            data-original="https://shop.decorte-cosmetics.cn/statics/attachment/recommend/2021/7/12/17//56552650.jpg"
                            alt=""></div>
                    <div class="right1">
                        <div class="yi">黛珂心悦容光丝柔蜜粉套组</div>
                        <div class="er">黛珂心悦容光丝柔蜜粉套组</div>
                        <div class="san">¥ 380</div>
                        <div class="si">立即购买</div>
                    </div>
                </li>
            </a>
            <a href="particulars.html#id=5">

                <li>
                    <div class="left content">
                        <div class="yi" style="margin-left: 300px;">植物欣韵匀皙焕白乳水套组</div>
                        <div class="er" style="margin-left: 420px;">植物欣韵匀皙焕白乳水套组</div>
                        <div class="san" style="margin-left: 500px;">¥ 680 </div>
                        <div class="wu" style="margin-left: 485px; color: #CECFCE;">滋润型 - 普通型</div>
                        <div class="si">立即购买</div>
                    </div>
                    <div class="right"><img class="lazy"
                            data-original="https://shop.decorte-cosmetics.cn/statics/attachment/recommend/2021/7/12/17//57089846.jpg"
                            alt=""></div>
                </li>
            </a>
            <a href="particulars.html#id=6">

                <li>
                    <div class="left1"><img class="lazy"
                            data-original="https://shop.decorte-cosmetics.cn/statics/attachment/recommend/2021/7/12/17//57155131.jpg"
                            alt=""></div>
                    <div class="right1">
                        <div class="yi">黛珂多重防晒乳套组</div>
                        <div class="er">黛珂多重防晒乳套组</div>
                        <div class="san">¥ 290</div>
                        <div class="si">立即购买</div>
                    </div>
                </li>
            </a>
            <a href="particulars.html#id=7">

                <li>
                    <div class="left">
                        <div class="yi" style="margin-left: 300px;">黛珂AQ舒活洗颜霜套组</div>
                        <div class="er" style="margin-left: 400px;">黛珂AQ舒活洗颜霜套组</div>
                        <div class="san" style="margin-left: 510px;">¥ 350 </div>
                        <div class="si">立即购买</div>
                    </div>
                    <div class="right"><img class="lazy"
                            data-original="https://shop.decorte-cosmetics.cn/statics/attachment/recommend/2021/3/16/17//07120534.jpg"
                            alt=""></div>
                </li>
            </a>
        </ul>
    </div>

    <!-- 两个广告 -->
    <div class="introduce content" style="margin-top: 100px;">
        <h1>套装美颜完美呵护</h1>
    </div>
    <div class="wire"></div>
    <div class="introduce">
        <h1>臻享会员独家礼遇</h1>
    </div>
    <div class="wire"></div>
    <!-- 三张图片 -->
    <div class="welfare">
        <div>
            <img src="https://shop.decorte-cosmetics.cn/statics/attachment/adv/2018/7/18/23//12016425.png" alt="">
            <h2>积分同步 顺丰包邮</h2>
            <div class="zi">尊享会员权益</div>
        </div>
        <div>
            <img src="https://shop.decorte-cosmetics.cn/statics/attachment/adv/2021/5/28/14//33307509.jpg" alt="">
            <h2>2020年会员积分兑换</h2>
            <div class="zi">感恩礼赞甄享珍颜会尊贵权益</div>
        </div>
        <div>
            <img src="https://shop.decorte-cosmetics.cn/statics/attachment/adv/2018/7/18/23//11380454.png" alt="">
            <h2>珍颜会会员制度</h2>
            <div class="zi">挚爱加入珍颜会享礼遇</div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="bottom">
        <div class="typeArea">
            <ul>
                <li>客户服务</li>
                <li>退货规定</li>
                <li>查看我的订单</li>
                <li>常见问题</li>
            </ul>
            <ul>
                <li>帮助中心</li>
                <li>联系我们：400-920-2203</li>
                <li>投诉与建议</li>
                <li>珍颜会会员中心</li>
            </ul>
            <ul>
                <li>关于黛珂</li>
                <li>品牌故事</li>
                <li>黛珂保养概念</li>
                <li>美容中心</li>
                <li>门店查询</li>
            </ul>
            <ul>
                <li>关注我们</li>
                <li>
                    <img src="https://shop.decorte-cosmetics.cn/themes/kaben/static/images/home/QR.jpg" alt="">
                    <p>扫描二维码</p>
                    <p>关注黛珂中国官方微信</p>
                </li>
            </ul>
        </div>
    </div>
    <!-- 版权所有 -->
    <div class="copyright">
        <div class="copyright1">
            <span>© 高丝化妆品销售（中国）有限公司版权所有</span>
            <span>沪ICP备09002279号-17</span>
            <span>公网安备 31010902002154号</span><br>
            <span>国家药监局提示您：请正确认识化妆品功效，化妆品不能替代药品，不能治疗皮肤病等疾病</span>
        </div>
    </div>
    <script src="../dist/static/jQuery.js"></script>
    <script src="./static/libs/javascripts/swiper-bundle.min.js"></script>
    <script src="./scss/COSME.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>
</body>

</html>